<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
        class="searchForm"
      >
        <FormItem label="企业名称/企业ID">
          <Input v-model="formItem.companyKeyword" placeholder="请输入企业名称/企业ID" style="width:150px"></Input>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="formItem.phone" placeholder="请输入手机号" style="width:150px"></Input>
        </FormItem>
        <FormItem label="时间段">
          <Row>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择开始时间" v-model="formItem.searchDataBegin"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择结束时间" v-model="formItem.searchDataFinish"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <Tabs type="card" class="card" @on-click="changeStatus" :value="Number(auditStatus)-1">
      <TabPane label="已审核" :value="1"></TabPane>
      <TabPane label="待审核" :value="2"></TabPane>
    </Tabs>
    <TableList
      :columns="columns"
      :data="data"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      :newOne="auditStatus==1?'新建企业':''"
      @newOneFn="newOne"
      @changePage="changePage"
    ></TableList>
    <Modal
      title="账户明细"
      v-model="modal10"
      width="800"
      class-name="vertical-center-modal"
      footer-hide
    >
      <div style="min-height:200px;">
        <Table
          :columns="detailCol"
          :data="detailData"
          stripe="false"
          style="max-height:400px;overflow-y:scroll;border:none"
          class="detailTable"
        ></Table>
      </div>
    </Modal>
    <Modal
      v-model="isShowMemberPage"
      width="18"
      title="企业会员"
      @on-ok="buyMember"
      @on-cancel="cancel"
    >
      <RadioGroup v-model="memberPriceId" vertical>
        <Radio
          v-for="(item,index) in memberConfigList"
          :key="index"
          :label="item.id"
          size="large"
          style="height:25px;padding-left:10px"
        >{{item.name}}</Radio>
        <Radio size="large" :label="-99" style="height:25px;padding-left:10px">取消会员</Radio>
      </RadioGroup>
    </Modal>

    <Modal
      v-model="isShowMemberRightPage"
      width="30"
      title="企业权益"
      @on-ok="initMemberRight"
      @on-cancel="cancel"
    >
      <Form
        :model="initMemeberForm"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 200px;"
        class="searchForm"
      >
        <div
          style="background-color: #f5f5f5;color: #333;width: 100vw;text-align:center;height:25px;line-height:25px;"
        >可编辑企业初始权益，初始权益长期有效</div>
        <FormItem label="发布职位次数">
          <InputNumber
            :min="0"
            v-model="initMemeberForm.init_publish_job_times"
            placeholder="请输入数字"
            style="width:150px;margin-bottom:10px;margin-right:4px"
            @on-change="input_publish_job_times"
          ></InputNumber>次
        </FormItem>
        <FormItem label="刷新职位次数">
          <InputNumber
            :min="0"
            v-model="initMemeberForm.init_refresh_job_times"
            placeholder="请输入数字"
            style="width:150px;margin-bottom:10px;margin-right:4px"
            @on-change="input_refresh_job_times"
          ></InputNumber>次
        </FormItem>
        <FormItem label="免费查看简历份数">
          <InputNumber
            :min="0"
            v-model="initMemeberForm.init_free_resume_times"
            placeholder="请输入数字"
            style="width:150px;margin-bottom:10px;margin-right:4px"
            @on-change="input_free_resume_times"
          ></InputNumber>次
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import { CompanyList, CompanyBalanceLog, CompanyAudit } from "api/recuit/bussiness";
import { memberEdit, buyMember, cancelMemberRight, initMemberRight } from "api/recuit/companyMenu.js";
import { initMemberList, objectDeepCopy } from "@/common/js/util.js";
import _ from 'lodash'

export default {
  name: "",
  data () {
    return {
      formItem: {
        companyKeyword: "",
        phone: "",
        searchDataBegin: "",
        searchDataFinish: "",
        auditStatus: 1
      },
      columns: [
        {
          title: "企业ID",
          key: "company_id",
          width: 100,
        },
        {
          title: "企业信息",
          key: "message",
          width: 200,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                // h("img", {
                //   attrs: {
                //     src: params.row.logo
                //   },
                //   style: {
                //     padding: "2px",
                //     width: "80px",
                //     height: "80px"
                //   },
                //   on: {
                //     click: () => {
                //       // this.show(params.index);
                //     }
                //   }
                // }),
                h(
                  "span",
                  {
                    style: {
                      marginLeft: "15px"
                    }
                  },
                  params.row.title
                )
              ]
            );
          }
        },
        {
          title: "发布职位",
          key: "postJob",
          width: 100,
        },
        {
          title: "在招职位",
          key: "onlineJob",
          width: 100,
        },
        {
          title: "账户余额(元)",
          key: "balance",
          width: 110,
        },
        {
          title: "剩余权益",
          key: "memberExpireDate",
          width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center"
                }
              },
              [
                h(
                  "div",
                  '发布次数：' + params.row.publish_job_times
                ),
                h(
                  "div",
                  '刷新次数：' + params.row.refresh_job_times
                ),
                h(
                  "div",
                  '查看简历：' + params.row.free_resume_times
                )
              ]
            );
          }
        },
        {
          title: "会员到期时间",
          key: "memberExpireDate",
          width: 130,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      marginLeft: "15px"
                    }
                  },
                  (params.row.isMember == 1) ? params.row.memberExpireDate : '未开通'
                )
              ]
            );
          }
        },
        {
          title: "创建时间",
          key: "time_create",
          width: 130,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, params) => {
            if (this.auditStatus == 1) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px",
                    },
                    on: {
                      click: () => {
                        this.balanceLog(params.row.company_id);
                        this.modal10 = true;
                      }
                    }
                  },
                  "账户明细"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px",
                    },
                    on: {
                      click: () => {
                        this.editShop(params.row.company_id)
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.showMemberRightPage(params.row.company_id)
                      }
                    }
                  },
                  "会员"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    on: {
                      click: () => {
                        this.initMemberRightPage(params.index)
                      }
                    }
                  },
                  "权益"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editShop(params.row.company_id);
                        this.modal10 = true;
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.doData(params.row.company_id, 1)
                      }
                    }
                  },
                  "通过"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "middle"
                    },
                    on: {
                      click: () => {
                        this.doData(params.row.company_id, 3)
                      }
                    }
                  },
                  "拒绝"
                )
              ]);
            }
          }
        }
      ],

      data: [],
      detailCol: [
        {
          title: "操作时间",
          key: "time_create",
          width: 200
        },
        {
          title: "操作名称",
          key: "description",
          width: 200
        },
        {
          title: "金额明细",
          key: "change",
          width: 200
        }
      ],
      detailData: [],
      modal10: false,
      isShowMemberPage: false,
      memberPriceId: 0,
      memberConfigList: [],
      memberCompanyId: 0,
      isShowMemberRightPage: false,
      initMemeberForm: {
        init_publish_job_times: 0,
        init_refresh_job_times: 0,
        init_free_resume_times: 0,
        index: 0
      },
      page: 0,
      pageNum: 10,
      companySum: 0,    //企业总数
      auditStatus: 1,   //查询状态
      pageTotal: 0,   //页面总数
    };
  },
  components: {
    TableList
  },

  mounted () {
    if (this.$route.params.auditStatus) {
      this.formItem.auditStatus = this.$route.params.auditStatus
      this.auditStatus = this.$route.params.auditStatus
    }

    this.getData();
  },

  methods: {
    //切换页面
    changePage (data) {
      let { page } = data;
      this.page = --page;
      this.getData();
    },
    //新建企业
    newOne () {
      this.$router.push({ name: 'editShop' })
    },
    //查询条件
    searchData () {
      this.page = 0;
      this.getData();
    },
    //查询状态
    changeStatus (e) {
      this.page = 0;
      this.auditStatus = ++e;
      this.getData();
    },
    //获取商户列表
    getData () {
      let page = this.page;
      let pageNum = this.pageNum;
      let formItem = this.formItem;
      let dataList = new Object();
      this.data = []
      dataList.page = ++page;
      dataList.pageNum = pageNum;
      //获取查询条件
      for (let i in formItem) {
        dataList[i] = formItem[i];
      }
      //获取状态条件
      dataList.auditStatus = this.auditStatus;

      //时间段转换成时间戳
      dataList.searchDataBegin = dataList.searchDataBegin.valueOf() / 1000;
      dataList.searchDataFinish = dataList.searchDataFinish.valueOf() / 1000;

      CompanyList(dataList).then(res => {
        let { companyList, companySum, page } = res;
        this.data = companyList;
        this.companySum = companySum;
        this.pageTotal = page.pageTotal
        this.page = Number(page.page)
      });
    },
    //获取充值明细
    balanceLog (companyId) {
      CompanyBalanceLog({ companyId }).then(res => {
        this.detailData = res;
      });
    },
    //审核操作 通过1 拒绝3
    doData (companyId, auditStatus) {
      CompanyAudit({ companyId, auditStatus }).then(res => {
        this.$Message.success("操作成功")
        // 刷新页面
        this.getData()
      }).catch(err => { this.$Message.error(err) })
    },
    editShop (companyId) {
      this.$router.push({ name: 'editShop', params: { companyId } })
    },
    //打开会员特权页面
    showMemberRightPage (companyId) {
      this.isShowMemberPage = true;
      this.memberCompanyId = companyId;

      //编辑套餐
      memberEdit().then(res => {
        // console.log(res)
        if (res) {
          const { priceCol, priceIdList } = this.formatMemberList(res.member_price_json)
          this.memberConfigList = priceCol
        } else {
          this.memberConfigList = initMemberList()
        }
        // console.log(this.memberConfigList)
      }).catch((error) => {
        this.$Message.error(error);
      });
    },
    //初始化数据
    formatMemberList (pricedata) {
      if (_.isString(pricedata)) {
        let priceList = JSON.parse(pricedata)
        let priceIdList = [];
        // 过滤未生效的数据
        let result = _.filter(priceList, function (info) {
          if (info['is_effect'] && info['is_open']) {
            priceIdList.push(info['id'])
          }

          if (info['is_effect']) {
            return true
          }
        });

        return { priceCol: result, priceIdList: priceIdList }
      }
    },
    //购买会员
    buyMember () {
      if (this.memberPriceId == -99) {
        let memberForm = {
          company_id: this.memberCompanyId,
        }
        // console.log(memberForm)

        cancelMemberRight(memberForm).then(res => {
          // console.log(res)
          this.$Message.success("操作成功");
        }).catch((error) => {
          this.$Message.error(error);
        });
      } else {
        let memberForm = {
          company_id: this.memberCompanyId,
          member_price_id: this.memberPriceId
        }
        // console.log(memberForm)

        buyMember(memberForm).then(res => {
          // console.log(res)
          this.$Message.success("操作成功");
          // this.$router.go(0)
        }).catch((error) => {
          this.$Message.error(error);
        });
      }

    },
    //初始化会员权益
    initMemberRightPage (index) {
      // console.log(this.data[index].company_id)

      this.isShowMemberRightPage = true;
      this.memberCompanyId = this.data[index].company_id;

      this.initMemeberForm.init_publish_job_times = this.data[index].init_publish_job_times
      this.initMemeberForm.init_refresh_job_times = this.data[index].init_refresh_job_times
      this.initMemeberForm.init_free_resume_times = this.data[index].init_free_resume_times
      this.initMemeberForm.index = index
    },
    initMemberRight () {
      let initMemeberForm = objectDeepCopy(this.initMemeberForm)
      console.log(initMemeberForm)

      let form = Object.assign(initMemeberForm, { company_id: this.memberCompanyId })
      console.log(form)

      //编辑套餐
      initMemberRight(form).then(res => {
        // console.log(res)
        this.$Message.success("操作成功");
        this.$router.go(0)
      }).catch((error) => {
        this.$Message.error(error);
      });
    },
    input_publish_job_times (number) {
      this.data[this.initMemeberForm.index].init_publish_job_times = Math.round(number)
    },
    input_refresh_job_times (number) {
      this.data[this.initMemeberForm.index].init_refresh_job_times = Math.round(number)
    },
    input_free_resume_times (number) {
      this.data[this.initMemeberForm.index].init_free_resume_times = Math.round(number)
    }
  }
};
</script>

<style scoped lang="less">
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.searchForm {
  .ivu-form-item {
    margin-bottom: 0;
  }
}
.card {
  margin-bottom: -16px;
}
</style>
